<template>
	<view>
		<view class="main">
			<view class=" FlexBox">
				<view class="bold">头像</view>
				<view class="FlexBox">
					<image  @tap="chooseImage()" class="portrait" :src="UserInfo.member_avatar" mode=""></image>
					<image src="../../static/images/right_arrow.png" mode="" class="Rightarrow"></image>
				</view>
			</view>
			<view class="FlexBox">
				<view class="bold">昵&nbsp;&nbsp;&nbsp;&nbsp;称</view>
				<view class=""><input type="text" maxlength="8" v-model="UserInfo.nickname" /></view>
			</view>
			<view class="FlexBox" @click="Tozhaa()">
				<view class="bold">手机号码</view>
				<view class="">{{UserInfo.member_mobile}}</view>
			</view>
			<view class="FlexBox" @click="Tozhaa()">
				<view class="bold">电子邮箱</view>
				<view class="">{{UserInfo.member_email}}</view>
			</view>
			<view class="FlexBox" @click="ToReal()">
				<view class="bold">真实姓名</view>
				<view class="">{{UserInfo.member_truename?UserInfo.member_truename:""}}</view>
			</view>
			<view class="FlexBox" >
				 
				<view class="bold">出生年月</view>
				<view class="FlexBox">
					<gpp-date-picker style="width: 180rpx;" @onCancel="onCancel" @onConfirm="onConfirm" :startDate="startDate" :endDate="endDate" :defaultValue="pickerDate">
					    {{pickerDate}}
					</gpp-date-picker>
				<image src="../../static/images/right_arrow.png" mode="" class="Rightarrow"></image>
				</view>
			</view>
			
			<view class="FlexBox">
				<view class="bold">QQ号码</view>
				<view class="FlexBox" ><input type="number" maxlength="10" v-model="UserInfo.member_qq"/>
				</view>
			</view>
			
			
			<view class="FlexBox">
				<view class="bold">所在城市</view>
				<input @tap="openAddres" v-model="UserInfo.member_areainfo" style="width: 280px;" type="text" value="" disabled="true" placeholder="请选择所在城市"/>			
			</view>
			
			<view class="confirm" @click="confirm()">
				保存资料
			</view>
		</view>
	
		
		<simple-address ref="simpleAddress"  @onConfirm="onConfirmaddress" themeColor="#007AFF"></simple-address>
		<kps-image-cutter @ok="onok" @cancel="oncancle" :url="url" :fixed="false" :width="60" :height="60" ></kps-image-cutter>
	</view>
</template>

<script>
	import simpleAddress from '@/components/simple-address/simple-address.nvue';
	const requImg = require("../../common/api_sign/requImg.js")
	import kpsImageCutter from "@/member/components/ksp-image-cutter/ksp-image-cutter.vue";
	import gppDatePicker from "@/member/components/gpp-datePicker/gpp-datePicker.vue"
	const util = require("../../common/api_sign/request.js")
	let system=uni.getSystemInfoSync()
	export default {
		components: {
			simpleAddress,
			kpsImageCutter,
			gppDatePicker
		},
		data(){
			return {
				//地址数据
				area_info:"",
				province:{area_name:"请选择",area_id:0},
				City:{area_name:"请选择",area_id:0},
				county:{area_name:"请选择",area_id:0},
				//三级联动
				pickerText: '',
				
				imgInfo:"",
				
				UserInfo:[],
				url: "",
				height:120*system.pixelRatio,
				width:120*system.pixelRatio,
				fileName:"",
				header:"",
				startDate: "1970-01-01",
				endDate: "2020-07-24",
				pickerDate: '2000-01-01',
				
			}
		},
		onLoad() {
			this.GetInfo();
			var yesterday=new Date();
			this.endDate=yesterday.getFullYear() + "-" + (yesterday.getMonth()> 9 ? (yesterday.getMonth() + 1) : "0" + (yesterday.getMonth() + 1)) + "-" +(yesterday.getDate()> 9 ? (yesterday.getDate()) : "0" + (yesterday.getDate()));
		},
		methods: {
			 onCancel(e){
				console.log(e);
		    },
			onConfirm(e){
				this.pickerDate = e.dateValue;
			},
			//实名验证
			ToReal(){
				uni.navigateTo({
					url:"/member/auth/Authentication"
				})
			},
			// 修改账户安全的手机号、邮箱
			Tozhaa(){
				uni.navigateTo({
					url:"/member/security/index"
				})
			},
			
			chooseImage() {
				 let that=this
				uni.chooseImage({
					count:1,
					success: (res) => {
						// 设置url的值，显示控件
						that.url = res.tempFilePaths[0];
					}
				});
			},
		
			onok(ev) {
				let that=this;
				this.header=ev.path
				this.upImg(ev.path,that.$util.server+"/mobile/index.php?act=upload&op=uploadFile");
				this.url = "";
			},
			oncancle() {
				// url设置为空，隐藏控件
				this.url = "";
			},
			
			GetInfo(){//获取用户信息
			let that = this;
				util.request({
					url: '/mobile/index.php?act=member_index&op=getInfo',
					method: 'POST',
					data: {},
				}).then(function(res) {
					that.UserInfo=res.datas.member_info;
					if(!that.UserInfo.member_qq){
						that.UserInfo.member_qq=""
					}
					if(!that.UserInfo.member_qq){
						that.UserInfo.member_qq=""
					}
					console.log('头像',that.fileName)
					if(that.UserInfo.member_birthday){
						that.pickerDate=that.UserInfo.member_birthday;
					}
				})
			},
			confirm(){//修改用户信息
				let that = this;
				let idcardReg = /^[\u4E00-\u9FA5A-Za-z0-9_]+$/;
				if(!idcardReg.test(that.nickname)){
					uni.showToast({
						icon:"none",
						title:"昵称格式错误"
					})
					return false
				}
				util.request({
					url: '/mobile/index.php?act=member_index&op=editInfo',
					method: 'POST',
					data: {
						nickname:that.UserInfo.nickname,
						// member_sex:"3",
						member_qq:that.UserInfo.member_qq,
						eh_customer_no:that.UserInfo.eh_customer_no,
						area_id:that.county.area_id,
						city_id:that.City.area_id,
						province_id:that.province.area_id,
						area_info:that.area_info,
						avator:that.fileName,
						birthday:that.pickerDate.replace(/\//g,"-"),
					},
				}).then(function(res) {
					if(res.error_code==0){
						uni.showToast({
							title:"保存成功",
							icon:"none",
							success: () => {
								setTimeout(()=>{
									uni.setStorageSync("headPortrait",true)
									uni.navigateBack({
										delta:1
									})
									// ({
									// 	url:"../../pages/Transaction_management/Personal_Center"
									// })
								},1000)
							}
							
						})
					}else{
						uni.showToast({
							title:res.message,
							icon:"none",
						})
					}
					console.log(res)
				})
			},
			
			// 上传图片
			upImg(Imgurl,url){
				let that=this;
				
				let  data = requImg.request("index.php?act=upload&op=uploadFile&buss_type="+that.$uploadType.uploadtype002);
				// console.log(data)
				 var uper = uni.uploadFile({
				  // 需要上传的地址
				  url:url,
				  // filePath  需要上传的文件
				  filePath:Imgurl,
				  name: 'file',
				  formData: {
				    key:data.key,
					buss_type:data.buss_type,
					api_sign:data.api_sign, 
					comefrom:data.comefrom,
					api_time:data.api_time,
					// api_member_id:data.api_member_id,
					// api_member_name:data.api_member_name,
				 },
				  success(res1) {
					  that.imgInfo=res1.data
					  let ImgInfo=JSON.parse(res1.data)
					  if(ImgInfo.error_code==0){
						  uni.showToast({
						  	icon:"loading",
							title:"图片上传中...",
							success() {
								setTimeout(()=>{
									if(ImgInfo.datas.file_url){
										that.UserInfo.member_avatar=Imgurl
										that.fileName=ImgInfo.datas.file_name;
									}
									
								},1000)
							}
						  })
					  }else{
						  uni.showToast({
						  	title:ImgInfo.message,
							icon:"none"
						  })
					  }
				  },
				  })
			},
			
			////三级联动
			openAddres() {
				this.$refs.simpleAddress.open();
			},
			onConfirmaddress(e) {
				let that=this
				this.pickerText = JSON.stringify(e);			
				this.province.area_name=e.labelArr[0];
				this.City.area_name=e.labelArr[1];
				this.county.area_name=e.labelArr[2];
				
				this.area_info=e.label.replace(/-/g, " ")
				this.UserInfo.member_areainfo=that.area_info
				this.province.area_id=JSON.parse(that.pickerText).provinceCode;
				this.City.area_id=JSON.parse(that.pickerText).cityCode;
				this.county.area_id=JSON.parse(that.pickerText).areaCode;
				
			},
			
		},
		
	}
</script>

<style>
	.my-avatar{
		height: 0!important;
	}
	.bold{
		font-weight: bold;
		color: #000000;
	}
	.FlexBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
	}
	input{
		display: inline-block;
		text-align: right;
		font-size: 30rpx;
		width: 200rpx;
	}
	.main{
		width: 100%;
		height: 100vh;
		background-color: #FFFFFF;
	}
	.main>view{
		padding: 20rpx 25rpx;
		border-bottom: 1rpx solid #EEEEEE;
	}
	.portrait{
		width: 120rpx;
		height: 120rpx;
		margin: 20rpx;
		border-radius: 50%;
	}
	.Rightarrow{
		width: 12rpx;
		height: 20rpx;
		vertical-align: middle;
		margin-left: 20rpx;
	}
	.confirm{
		width: 80%;
		height: 70rpx;
		text-align: center;
		background-color: #ff4300;
		line-height: 70rpx;
		color: #FFFFFF;
		font-weight: bold;
		border-radius: 40rpx;
		font-size: 30rpx;
		margin: 60rpx auto;
		padding: 0 !important;
		}
	.shadow{
		width: 100%;
		height: 100vh;
		background-color: rgba(51,51,51,.4);
		position: fixed;
		top: 0;
	}
	.region{
		position: relative;
		height: 500rpx;
		background-color: #fff;
		width: 100%;
		position: fixed;
		bottom: 0;
		text-align: center;
		
	}
	.List{
		height: 400rpx;
		overflow-x: auto;
		
	}
	.region .List>view{
		border-bottom: 1rpx solid #EEEEEE;
	}
	.region .Title{
		line-height: 80rpx;
		border-bottom: 1rpx solid #EEEEEE;
	}
	.Determine{
		position: absolute;
		top: 0rpx;
		right: 30rpx;
	}
	.curr{
		background-color: #EEEEEE;
	}
</style>